/* CSS流动波浪效果 */

.ripple {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    overflow: hidden;

    .waves {
        position: relative;
        width: 100%;
        height: 20%;
        min-height: 100px;
        max-height: 180px;
        z-index: 2;
        margin-bottom: -7px; /* 防止波浪底部出现间隙 */
    }

    /* 增强流动波浪动画 */
    .parallax > use {
        fill: rgba(255, 255, 255, 0.7);
        animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
        transition: all 0.3s ease;
    }

    .parallax > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
        fill: rgba(255, 255, 255, 0.7);
    }

    .parallax > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
        fill: rgba(255, 255, 255, 0.5);
    }

    .parallax > use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
        fill: rgba(255, 255, 255, 0.3);
    }

    .parallax > use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
        fill: #fff;
    }

    /* 改进的流动动画 */
    @keyframes move-forever {
        0% {
            transform: translate3d(-90px, 0, 0);
        }

        100% {
            transform: translate3d(85px, 0, 0);
        }
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .waves {
            height: 40px;
            min-height: 40px;
        }
    }
}
